<div class="ssl-user-link-list">
  <div class="row">
    <div class="col-md-12">
      <ng-template *ngIf="curUser; then tpl_isSignIn; else tpl_noSignIn;"></ng-template>
    </div>
  </div>
  <ng-template #tpl_noSignIn>
    <h5 class="text-warning"><span class="glyphicon glyphicon-info-sign"></span> 您还没有登入，要登入后才能查看您收藏的链接哦！</h5>
    <button class="btn btn-success btn-block" [routerLink]="['/sign-in']">现在就去登入 <i class="glyphicon glyphicon-log-in"></i></button>
  </ng-template>
  <ng-template #tpl_isSignIn>
    <ng-template *ngIf="!links; then tpl_loading; else tpl_loaded;"></ng-template>
    <ng-template #tpl_loading>
      <h5><span class="glyphicon glyphicon-repeat ssl-anim-rotate"></span> 加载中&hellip;</h5>
    </ng-template>
    <ng-template #tpl_loaded>
      <ng-template *ngIf="links.length; then hasData; else noData;"></ng-template>
      <ng-template #noData>
        <h5 class="text-warning"><span class="glyphicon glyphicon-info-sign"></span> 暂无{{keywords ? '匹配' : ''}}数据，去添加一条看看！</h5>
      </ng-template>
      <ng-template #hasData>
        <h5 class="text-success"><span class="glyphicon glyphicon-info-sign"></span> 共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条</h5>
        <div class="list-group">
          <div *ngFor="let obj of links" class="list-group-item" [class.ssl-link-active]="obj === activeLink" (click)="onLinkClick(obj);">
            <div class="col-xs-10 col-sm-10 col-md-11" style="padding-left: 0;">
              <h4 class="list-group-item-heading">
                <img *ngIf="obj.iconUrl" [src]="obj.iconUrl" style="width: 22px; vertical-align: bottom;">
                <a tabindex="-1" href="javascript:;" class="title" [innerHTML]="obj.title | markToRed:keywords"></a>
                <br>
                <small><i class="glyphicon glyphicon-link"></i> <span class="href" [innerHTML]="obj.href | markToRed:keywords"></span></small>
              </h4>
              <p class="list-group-item-text" [innerHTML]="obj.summary | markToRed:keywords"></p>
            </div>
            <div class="btn-group" style="position: absolute; top: 0; right: 0; height: 100%;">
              <button tabindex="-1" class="btn btn-default update" style="height: 100%; border: none; border-radius: 0;" [routerLink]="['/user-link/update', obj._id]"><i class="glyphicon glyphicon-pencil"></i></button>
              <button tabindex="-1" class="btn btn-default remove" style="height: 100%; border: none; border-radius: 0;" (click)="onRemove($event, obj)"><i class="glyphicon glyphicon-trash text-danger"></i></button>
            </div>
            <div style="clear: both;"></div>
          </div>
          <div *ngIf="hasMore" class="list-group-item text-center" (click)="onLoadMoreClick()">
            <a tabindex="-1" href="javascript:;"><span class="glyphicon" [ngClass]="{'glyphicon-indent-right': !loadMoreProcessing, 'glyphicon-repeat ssl-anim-rotate': loadMoreProcessing}"></span> 加载更多</a>
            <span class="text-success">（共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条）</span>
          </div>
          <div *ngIf="!hasMore" class="list-group-item text-center ssl-notHasMore">没有更多了 <span class="text-success">（共找到 {{totalCount}} 条匹配数据，已加载 {{links.length}} 条）</span></div>
        </div>
      </ng-template>
    </ng-template>
  </ng-template>
  <!-- Modal -->
  <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">询问框
            <small>SuSuLink</small>
          </h4>
        </div>
        <div class="modal-body">
          您确定要删除 "<span class="bg-danger text-danger">{{wantRemoveLink?.title}}</span>" 吗？&hellip;
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default hidden-xs hidden-sm" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-sm btn-default hidden-md hidden-lg" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-danger hidden-xs hidden-sm" (click)="confirmRemove()">确定</button>
          <button type="button" class="btn btn-sm btn-danger hidden-md hidden-lg" (click)="confirmRemove()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>
